<template>
  <div class="goods-management-container">
    <h1>商品管理</h1>

    <!-- 添加商品 -->
    <h3>添加商品</h3>
    <form @submit="handleSubmit">
      <label>商品名称:</label>
      <input v-model="newGoods.name" placeholder="请输入商品名称" required />
      <br />
      <label>商品分类:</label>
      <input v-model="newGoods.category" placeholder="请输入商品分类" required />
      <br />
      <label>商品价格:</label>
      <input v-model="newGoods.price" placeholder="请输入商品价格" required />
      <br />
      <label>商品图片:</label>
      <input
        type="text"
        v-model="newGoods.imgUrl"
        placeholder="请输入图片名称"
        required
      />
      <br />
      <label>商品描述:</label>
      <textarea
        v-model="newGoods.goodsDesc"
        placeholder="请输入商品描述"
        required
      ></textarea>
      <br />
      <button type="submit">添加</button>
    </form>

    <!-- 商品列表 -->
    <h3>商品列表</h3>
    <table v-if="goods.length > 0" class="table">
      <thead>
        <tr>
          <th>ID</th>
          <th>商品名称</th>
          <th>分类</th>
          <th>价格</th>
          <th>图片</th>
          <th>创建时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="good in goods" :key="good.id">
          <td>{{ good.id }}</td>
          <td>{{ good.name }}</td>
          <td>{{ good.category }}</td>
          <td>{{ good.price }}</td>
          <td>
            <img :src="good.imgUrl" alt="商品图片" style="width: 50px;" />
          </td>
          <td>{{ good.ctime }}</td>
          <td>
            <button @click="handleEdit(good.id)">编辑</button>
            <button @click="handleDelete(good.id)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <p v-else>暂无商品数据</p>

    <!-- 分页 -->
    <pagination
      v-model:page="currentPage"
      :total-pages="totalPages"
      @page-change="handleChangePage"
    ></pagination>
  </div>
</template>

<script>
import { ref, onMounted } from "vue";
import { addGoods, getGoodsList, deleteGoods } from "../api/goods";
import Pagination from "./Pagination.vue";

export default {
  components: {
    Pagination,
  },
  setup() {
    const currentPage = ref(1);
    const totalPages = ref(0);
    const goods = ref([]);
    const newGoods = ref({
      name: "",
      category: "",
      price: "",
      imgUrl: "",
      goodsDesc: "",
    });

    // 获取商品列表
    const fetchGoods = async (page = 1) => {
      const { data } = await getGoodsList({ currentPage: page, pageSize: 10 });
      goods.value = data.data;
      totalPages.value = data.total;
    };

    // 添加商品
    const handleSubmit = async (e) => {
      e.preventDefault();
      await addGoods(newGoods.value);
      fetchGoods(); // 重新加载商品列表
      newGoods.value = {
        name: "",
        category: "",
        price: "",
        imgUrl: "",
        goodsDesc: "",
      }; // 清空表单
    };

    // 编辑商品
    const handleEdit = async (id) => {
      console.log("编辑商品:", id);
    };

    // 删除商品
    const handleDelete = async (id) => {
      const { code, msg } = await deleteGoods(id);
      if (code === 0) {
        fetchGoods(); // 重新加载商品列表
        alert(msg);
      }
    };

    // 分页
    const handleChangePage = (newPage) => {
      currentPage.value = newPage;
      fetchGoods(newPage);
    };

    // 初始化加载商品列表
    onMounted(() => {
      fetchGoods();
    });

    return {
      currentPage,
      totalPages,
      goods,
      newGoods,
      handleSubmit,
      handleEdit,
      handleDelete,
      handleChangePage,
    };
  },
};
</script>

<style scoped>
.goods-management-container {
  padding: 20px;
}
.table {
  width: 100%;
  border-collapse: collapse;
}
th,
td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}
th {
  background-color: #f4f4f4;
}
button {
  margin-right: 5px;
}
</style>
